<template>
  <div>
    <el-dialog
      :title="`${name}旗下详情`"
      v-model="other.isShow"
      lock-scroll
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      draggable
      align-center
      width="1000px"
      @closed="closed"
    >
      <div class="rebate-detail-dialog-box">
        <div class="form pb-[10px]">
          <el-row :gutter="12">
            <el-col :span="4">
              <el-input v-model="form.name" placeholder="用户名/昵称/备注" />
            </el-col>
            <el-col :span="6">
              <div class="flex items-center">
                <el-button type="primary" @click.stop="search">搜索</el-button>
                <el-button type="danger" @click.stop="handleRefresh">清空</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="grow-[1] h-0 overflow-hidden">
          <el-table
            scrollbar-always-on
            ref="elTableRef"
            v-loading="state.loading"
            :data="list"
            height="100%"
            border
            stripe
            fit
          >
            <template #empty>
              <ui-empty />
            </template>
            <el-table-column
              prop="Name"
              align="center"
              label="用户名"
              show-overflow-tooltip
              min-width="80"
            />
            <el-table-column prop="Nickname" align="center" label="昵称" show-overflow-tooltip />
            <el-table-column prop="Note" align="center" label="备注" show-overflow-tooltip />
            <el-table-column prop="BetAmount" align="center" label="旗下流水">
              <template #default="{ row }: TableItem">
                <ui-amount :num="row.BetAmount"></ui-amount>
              </template>
            </el-table-column>
            <el-table-column prop="RebateAmount" align="center" label="总佣金">
              <template #default="{ row }: TableItem">
                <ui-amount :num="row.RebateAmount"></ui-amount>
              </template>
            </el-table-column>
            <el-table-column prop="RebateAmountGot" align="center" label="已返佣">
              <template #default="{ row }: TableItem">
                <ui-amount :num="row.RebateAmountGot"></ui-amount>
              </template>
            </el-table-column>
            <el-table-column prop="RebateAmountNo" align="center" label="未返佣">
              <template #default="{ row }: TableItem">
                <ui-amount :num="row.RebateAmountNo"></ui-amount>
              </template>
            </el-table-column>
            <el-table-column prop="BackRate" label="抽佣比例" align="center" width="100">
              <template #default="{ row }: TableItem"> {{ row.BackRate * 100 }}% </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="flex justify-end mt-[10px] mx-[15px]">
          <ui-pagination
            :total="state.total"
            v-model:pageSize="state.pageSize"
            v-model:currentPage="state.page"
            @current-change="getData"
          ></ui-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { useList } from "@/hooks/useList";
import { reqAgentRebateDetail } from "@/api/report";
import moment from "moment";

interface TableItem {
  row: ReportAgentRebateDetailMo;
}
interface Params {
  AgentUserId: number;
  Name?: string;
  StartDate?: string;
  EndDate?: string;
}
const props = withDefaults(
  defineProps<{
    name: string | undefined;
    uid: number | undefined;
    date: string[];
  }>(),
  {
    uid: undefined
  }
);
const emit = defineEmits(["update"]);

const other = reactive({
  updating: false,
  isShow: false
});
const form = reactive({
  name: ""
});
const getParams = () => {
  console.log(props.date);
  const params: Params = {
    AgentUserId: props.uid as number
  };
  if (props.date) {
    params.StartDate = moment(props.date[0]).format("YYYY-MM-DD 00:00:00");
    params.EndDate = moment(props.date[1]).format("YYYY-MM-DD 23:59:59");
  }
  if (form.name) {
    params.Name = form.name;
  }
  return params;
};
const { elTableRef, state, list, getData, search } = useList<ReportAgentRebateDetailMo, Params>(
  reqAgentRebateDetail,
  getParams
);

const closed = () => {
  other.isShow = false;
  form.name = "";
};

const open = () => {
  if (!props.uid) return;
  other.isShow = true;
  nextTick(() => {
    getData();
  });
};

// 重置
const handleRefresh = () => {
  form.name = "";
  search();
};

defineExpose({
  open
});
</script>
<style scoped lang="scss">
.rebate-detail-dialog-box {
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
:deep(.el-table) td .cell {
  padding: 0px 5px !important;
}
</style>
